<template>
  <div class="app">
    <div class="top">注册账号</div>
    <input type="text" placeholder="请输入手机号" maxlength="11"/>
    <input type="text" placeholder="请输入短信验证码" minlength="8" maxlength="16"/>
    <input type="password" placeholder="请输入密码" maxlength="12"/>
    <div class="p">密码由8-16位数字，字符或符号组成，至少含有两种以上的字符</div>
    <div class="content">
      <input type="checkbox"/>已阅读并同意<span style="color: red;text-indent: 0px">相关条约</span>
    </div>
    <button @click="go_Thelogin">注册</button>
    <div class="yzm">发送验证码</div>
  </div>
</template>

<script>
export default {
  name: 'registered',
  methods: {
    go_Thelogin() {
      this.$router.push('./index/myCommodity');
    },
  },
};
</script>

<style lang="scss" scoped>
  .app{
    width: 100vw;
    box-sizing: border-box;
    padding: 50px 50px;
    position: relative;
    .p{
      font-size: 10px;
    }
    .top{
      line-height: 200px;
      text-align: center;
      font-size: 65px;
      font-weight: bold;
      letter-spacing: 5px;
      margin-bottom: 100px;
    }
    input{
      width: 100%;
      border: none;
      border-bottom: solid 1px #ddd;
      line-height: 150px;
      font-size: 50px;
    }
    .content{
      margin-top: 100px;
      line-height: 100px;
      vertical-align:top;
      position: relative;
      font-size: 50px;
      text-indent: 100px;
      input{
        position: absolute;
        top: 10px;
        left: 10px;
        width: 65px;
        height: 65px;
      }
      span{
        font-size: 50px;
        display: inline-block;
      }
    }
    button{
      background: linear-gradient(to right, red ,orange );
      border: 1px solid #ddd;
      width: 70vw;
      line-height: 100px;
      display: block;
      margin: 150px auto;
      color: white;
      letter-spacing: 3px;
      outline: none;
      font-size: 50px;
    }
    .yzm{
      position: absolute;
      right: 50px;
      top: 500px;
      line-height: 140px;
      width: 300px;
      border-left: 1px solid #ccc;
      text-align: center;
    }
  }
</style>
